<template>
  <div class="app-container">
    <el-container style="border: 1px solid #eee">
      <el-header class="el-header" style="height: 60px;">
        <el-select v-model="choosedwebsites" multiple placeholder="请选择">
          <el-option
            v-for="item in websites"
            :key="item.id"
            :label="item.domain"
            :value="item.id"
          />
        </el-select>
      </el-header>
      <el-main>
        <el-tabs v-model="activeName" tab-position="top" @tab-click="handleClick">
          <el-tab-pane
            v-for="(tab,index) in tabNames"
            :key="index"
            v-loading="loading"
            :label="tab.label"
            :name="tab.name"
          >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <button type="button" class="el-button el-button--text" style="float: left; padding: 3px 0px;">
                  <span><a :href="localSearch" target="_blank">在{{ activeName }}上搜索</a></span>
                </button>
                <button type="button" class="el-button el-button--text" style="float: left; padding: 3px 0px;">
                  <span><a :href="'https://www.semrush.com/info/'+query" target="_blank">semrush</a></span>
                </button>

                <button type="button" class="el-button el-button--text" style="float: left; padding: 3px 0px;">
                  <span><a
                    :href="' https://baike.baidu.com/search/none?&pn=0&rn=10&enc=utf8word='+query"
                    target="_blank"
                  >百度百科</a></span>
                </button>

                <button type="button" class="el-button el-button--text" style="float: left; padding: 3px 0px;">
                  <span><a :href="'https://en.wikipedia.org/w/index.php?search='+query" target="_blank">wiki</a></span>
                </button>
                <el-button style="float: right; padding: 3px 0" type="text" @click="GetPrevPage">上一页</el-button>
                <el-button style="float: right; padding: 3px 0" type="text" @click="GetNextPage">下一页</el-button>
              </div>
              <div
                v-for="item in searchDatas"
                class="text item"
                style="margin-right: 5px;
    font-size: 14px;
    overflow: hidden;
    margin-bottom: 12px;
    padding: 3px 5px 3px 0px;
    margin-left: 0px;"
              >
                <div style="display: inline-block;">
                  <span style="margin-right: 10px;display: block;">
                    <img :src="item.image" style="height: 100px;width:100px"></span>
                </div>
                <div style="padding-left: 10px;display: inline-block;">
                  <p class="title" v-html="item.title" />
                  <p class="desc" v-html="item.content" />
                  <span class="a"><a :href="item.url" target="_blank">{{ item.url }}</a></span>
                  <span v-if="currentTab.type===3">
                    <el-button type="text" size="small" @click="ShowSimilarweb(item.url)">similarweb</el-button></span>
                </div>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>

      </el-main>
      <el-dialog
        title="similarweb流量"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <iframe :src="sdomin1" frameborder="0" width="100%" height="200" style="border: solid 1px #D7D7D7;" />
        <iframe :src="sdomin2" frameborder="0" width="100%" height="200" style="border: solid 1px #D7D7D7;" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>
<style scoped>
  .app-container >>> .el-select .el-input {
    width: 130px;
  }

  .app-container >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .app-container >>> .text {
    font-size: 14px;
  }

  .app-container >>> .text p.title {
    font-weight: bold;
    font-weight: 600;
  }

  .app-container >>> .text p.desc {
    font-size: 10px;
  }

  .app-container >>> .text em {
    color: red;
  }

  .app-container >>> .text span.a {
    color: #3A7734;
  }

  .app-container >>> .item {
    margin-bottom: 1px;
  }

  .app-container >>> .clearfix:before,
  .app-container >>> .clearfix:after {
    display: table;
    content: "";
  }

  .app-container >>> .clearfix:after {
    clear: both
  }
</style>
<script>
export default {
  data() {
    return {
      choosedwebsites: '',
      websites: '0',
      searchDatas: [],
      activeName: 'amazon.com',
      tabNames: [],
      selecttabs: [],
      page: 1,
      currentTab: '',
      localSearch: 'https://www.google.com/search?source=hp&ei=&q=',
      loading: false,
      querystr: '',
      sdomin1: '',
      sdomin2: '',
      dialogVisible: false
    }
  },
  methods: {
    onSubmit() {
      if (!this.query.length) {
        return
      }
      this.loading = true
      this.tabNames.forEach((item, index) => {
        if (item.name === this.activeName) {
          // console.log(item.searchurl);
          this.localSearch = this.tabNames[index].searchurl
        }
      })
      this.localSearch += this.query
      console.log(this.currentTab.type)
      if (this.currentTab.type === 3) {
        this.querystr = this.query
      } else {
        this.querystr = this.query + ' site:' + this.activeName
      }
      // Post(JSON.stringify({ query: this.querystr, page: this.page })).then((response) => {
      //   this.searchDatas = response.data;
      //   this.loading = false;
      // });
      console.log('submit!')
    },
    GetNextPage() {
      this.page = this.page + 1
      this.onSubmit()
    },
    GetPrevPage() {
      this.page = this.page - 1
      if (this.page <= 0) {
        this.page = 1
      }
      this.onSubmit()
    },
    handleClick(tab, event) {
      this.tabNames.forEach((item, index) => {
        if (item.name === this.activeName) {
          // console.log(item.searchurl);
          this.localSearch = this.tabNames[index].searchurl
        }
      })
      this.onSubmit()
      console.log(tab, event)
    },
    handleChange(s, event) {
      console.log(parseInt(s))
      this.tabNames = this.selecttabs[parseInt(s)]['items']
      this.currentTab = this.selecttabs[parseInt(s)]
      this.activeName = this.tabNames[0].name
      this.localSearch = this.tabNames[0].searchurl
      this.onSubmit()
    },
    ShowSimilarweb(url) {
      this.dialogVisible = true
      const domain = ''
      console.log(domain)
      this.sdomin1 = '//widget.similarweb.com/traffic/' + domain
      this.sdomin2 = '//widget.similarweb.com/sources/' + domain
    }
  }
}

</script>
